<template>
    <div class="pug-choose-box mr-2" v-if="modelValue">
        <el-image :src="modelValue" fit="cover"></el-image>
    </div>

    <div class="pug-choose-box" @click="handleOpen">
        <el-icon :size="25">
            <Plus />
        </el-icon>
    </div>
    <el-dialog title="图库" v-model="dialogVisible" width="80%">

        <el-container class="bg-white rounded pug-imgbox">
            <el-header class="pug-imgbox-header">
                <el-button type="primary" @click="handleAdd">新增图标分类</el-button>
                <el-button type="warning" style="margin-left:5px;" @click="handleUpload">文件上传</el-button>
            </el-header>
            <el-container>
                <pug-image-aside @change="handleActiveById" ref="asideRef"></pug-image-aside>
                <pug-image-main ref="mainRef" openChoose  @choose="handleChoose"></pug-image-main>
            </el-container>
        </el-container>
        <template #footer>
            <span>
                <el-button @click="handleDialogClose">取消</el-button>
                <el-button type="primary" @click="handleDialogSure">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>

import { ref } from 'vue';
import { toast } from '../utils/utils';
var asideRef = ref(null);
var mainRef = ref(null);

// 修改v-model的值
const props = defineProps({
    modelValue:[String,Array]
});
// 触发修改v-model的值的事件
const emit = defineEmits(["update:modelValue"]);

// 点击图片的回调
var urls = [];
const handleChoose=(item)=>{
    console.log("你选中的元素内容是：" , item)
    urls = item.map(data=>data.src);
}



const dialogVisible = ref(false);
const handleDialogClose = () => {
    dialogVisible.value = false;
}

const handleDialogSure = () => {
    if(urls.length == 0){
        toast("请选择一张图片进行操作","warnning");
        return;
    }
    // 回传数据给v-model指令
    emit("update:modelValue",urls[0]);
    // 关闭弹窗
    handleClose();
}

const handleOpen = () => {
    dialogVisible.value = true;
}


const handleClose = () => {
    dialogVisible.value = false;
}


/*打开抽屉*/
const handleAdd = () => {
  asideRef.value.handlerOpen()
}


const handleActiveById = (id) => {
  mainRef.value.selectData(id);
}

const handleUpload = ()=>{
  mainRef.value.openUploadDrawer();
}

</script>

<style>
.pug-choose-box {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: #fff;
}

.pug-choose-box:hover {
    background: #eee;
}

.pug-imgbox {
    height: calc(70vh - 126px)
}

.pug-imgbox-header {
    border-bottom: 1px solid #eee;
    @apply flex items-center;
}
</style>